<template>
  <div class="car-view">
      <div class="car-head">
          <div class="car-message">
              <span class="car-fir">今 日 热 卖</span>
              <span class="car-sec">IT'S TIME TO DRIVE</span>
          </div>
          <div class="deal-card">
              <el-row id="el-card-row-media">
                <el-col
                v-for="(item, index) in salelist"
                :key="item.id"
                :span="7"
                :gutter="50"
                :offset="index > 0 ? 2 : 0"
                >
                <div class="card-body">
                    <el-card :body-style="{ padding: '0px',height: '100%' }">
                        <div class="image-div" :data-name="item.price">
                            <img
                            :src="item.url"
                            class="image"
                            />
                        </div>
                        <div style="padding: 14px" class="card-message">
                            <h3 class="dealname"><span>{{item.deal}}</span></h3>
                            <h5 class="good-message">{{item.goodmessage}}</h5>
                            <div class="bottom">
                                <time class="time">{{nowdate}}</time>
                                <!-- <button class="button" @click="choosecar(index)">Sale</button> -->
                                <el-button class="button" type="danger"  @click="choosecar(item,index)">
                                    <router-link :to="{path: '/cardeal',query: { id: item.id}}">Sale</router-link>
                                </el-button>
                            </div>
                        </div>
                    </el-card>
                </div>
                </el-col>
            </el-row>
          </div>
      </div>
  </div>
</template>

<script>
export default {
    name: 'CarView',
    computed: {
        nowdate() {
            let daytime = this.date.toLocaleString()
            return daytime
        }
    },
    data() {
        return {
            date: new Date(),
            salelist: [
                { id:'s1', url:require('assets/img/swappercarlist/red-ford1.png'),sets:'',deal: 'Mustang Shelby',price: '$ 6000,00',goodmessage: 'Ford Mustang, the new generation Mustang, is the latest 6th generation Mustang model. While continuing the classic appearance of Ford Mustang, it also incorporates global details. '},
                { id:'s2', url:require('assets/img/swappercarlist/house1.png'),sets:'2022 Mustang Shelby<sup>®</sup> GT500<sup>®</sup>',deal: 'Mustang GT-500',price: '$ 8888,00',goodmessage: 'The new car uses the latest family style black honeycomb front air grille and the classic Mustang LOGO. At the same time, the slender front headlamp set is built with xenon headlights and three blade type vertical side marker lamps, and is equipped with 19 inch black paint aluminum alloy wheels.'},
                { id:'s3', url:require('assets/img/swappercarlist/gray_ford_1.png'),sets:'',deal: 'Mustang Cobra Jet',price: '$ 12000,00',goodmessage: 'At the same time, the air conditioner outlet with rich American culture and the metal dial key inspired by the cockpit of the aircraft enhance the grade of the whole vehicle.'},
            ]
        }
    },
    methods: {
        // choosecar(item,index) {
        //     // console.log(index)
        //     // console.log(item);
        // }
    }
}
</script>

<style lang="scss" scoped>
$borderColor: #B22222;
    @media only screen and (max-width: 700px) {
        .image-div {
            font-size: 10px;
        }
        .car-fir {
            font-size: 39px;
        }
    }
    @media only screen and (min-width:701px){
        .image-div {
            font-size: 13px;
        }
        .car-fir {
            font-size: 50px;
        }
    }
    @media only screen and (max-width: 510px) {
        .car-fir {
            font-size: 35px;
        }

    }
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
a {
    text-decoration: none;
    color:white;
}
.el-card{
  
  position: relative;
  & {
      overflow:visible;
      border-radius: 8px;
      box-sizing: border-box;
  }
  &::before,
  &::after {
    content: "";
    position: absolute;
    width: 0px;
    height: 0px;
    opacity: 0;
    border-radius: 8px 8px 0 0;
    transition: .8s ease-in-out;
    z-index: 11;
  }
  &::before {
    top: -2px;
    left: -2px;
    border-top: 4px solid $borderColor;
    border-left: 4px solid $borderColor;
  }
  &::after {
    right: -2px;
    bottom: -2px;
    border-bottom: 4px solid $borderColor;
    border-right: 4px solid $borderColor;
  }
  &:hover::before,
  &:hover::after {
      display: block;
    border-radius: 8px 8px 0 0;
    opacity: 1;
    width: calc(100% );
    height: calc(100% );
  }
}
.car-view {
    width: 100%;
    height: 720px;
    overflow: hidden;
}
.car-head {
    max-width: 1100px;
    height: 700px;
    margin: 2px auto;
    overflow: hidden;
    box-sizing: border-box;
    }
.car-message {
    max-width: 700px;
    height: 120px;
    margin: 40px auto 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    // background-color: blue;
}
.car-fir {
    // font-size: 50px;
    font-weight: 900;
    font-style: italic;
    letter-spacing: 2px;
    color: rgba(60, 61, 53, 0.562);
}
.car-fir:hover {
    color: rgba(60, 61, 53, 0.856);
}
.car-sec {
    margin-top: 14px;
    letter-spacing: 10px;
    color: #0064d2;
}
.deal-card {
    box-sizing: border-box;
    height: 500px;
    // background-color: red;
}
@media screen and (max-width: 768px) {
    .deal-card {
        height: 400px;
        // padding-top: -5%;
    }
    #el-card-row-media {
        // padding-top: 0;
        height: 400px;
        // background-color: blue;
    }
}
.dealname {
    box-sizing: border-box;
}
.dealname span{
    font-size: 18px;
    font-weight: 600;
    color: #B22222;
    display:inline-block;
    box-sizing: border-box;
}
.dealname span {
    position: relative;
    &::after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 0;
        right: 0;
        height: 3px;
        width: 100%;
        transform: scale(0);
        background-color: $borderColor;
        transition: .6s ease-in-out;
    }
    .el-card:hover &::after {
        transform: scale(1);
    }
}
.el-row {
    // margin-top: 10px;
    height: 500px;
}
.el-col {
    margin: auto;
}
.el-card {
    border-radius: 8px;
}
.card-message {
    display: flex; 
    flex-direction: column;
}
.good-message {
    color: #000;
    height: 120px;
    margin-top: 5px;
    overflow: hidden;
    text-overflow:ellipsis;
}
.good-message:hover {
    overflow: auto;
}
.el-col::after{
    content:'';
    width: 100px;
    height: 10px;
    background-color: #ccc;
    box-sizing: border-box;
}
.time {
  font-size: 14px;
  color: #999;
  letter-spacing: 1.5px;
//   background-color: red;
  @media only screen and (max-width: 510px) {
        & {
            font-size: 10px;
        }
    }
}
.bottom {
  margin-top: 2.3rem;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  padding: 0;
  margin-left: 5px;
  min-height: 15px;
  min-width: 35px;
  width: 25%;
  z-index: 200;
}
.image {
  width: 100%;
  max-height: 180px;
//   height: 5%;
  display: block;
  border-radius: 8px 8px 0 0px;
  position: relative;
}
.image-div {
    // height: 30%;
    position: relative;
    &::before {
        content: attr(data-name);
        color:white;
        letter-spacing: 1.5px;
        font-weight: 700;
        position: absolute;
        bottom: 0;
        left: 0px;
        width: 100%;
        height: 0%;
        line-height: 3em;
        padding-left: 20px;
        // font-size: 16px;
        z-index: 10;
        opacity: 0;
        background-color: rgba(0,0,0,.7);
        transition: .8s linear;
        box-sizing: border-box;
    }
    .el-card:hover &::before {
        // height:25%;
        height: 3em;
        opacity: 1;
    }

}
</style>